<template>
	<div class="route">
		<!--<div @click="gz" style="position: absolute;left: 2%;top: 2%;font-size: 16px;z-index: 999;;">蜗牛瑜家馆主端</div>-->
		<div class="nav">
			<ul>
				<router-link to="/venue_course">
					<p class="nav_text">{{gym_sessionid.username}}</p>
				</router-link>
				<!-- <li>
                    <div class="nav_service" @click.stop="service($event)">管理前台服务</div>
                    <div class="nav_top" v-for="(item,index) in most" :key="index" :class="{ haha:changeRed == index}" @click="change(index)">
                        <img :src="item.image" alt="">
                        <span>{{item.text}}</span>
                    </div>
                    <div class="nav_class" @click.stop="mould($event)">管理课程模版</div>
                </li>     -->
			</ul>
			<template>
				<Menu active-name="1-2" :open-names="['1']">
					<Submenu name="1" @click="boss">
						<template slot="title">
							<img src="../assets/images/route/route_03.png" alt="">
							<router-link to='/Boss_information'>Boos信息</router-link>
						</template>
					</Submenu>
					<Submenu name="2">
						<template slot="title">
							<img src="../assets/images/route/route_06.png" alt="">
							<router-link to='/Venue_information'> 场馆管理</router-link>
						</template>
						<MenuItem name="2-1">
						<router-link to='/service'>管理前台服务</router-link>
						</MenuItem>
						<MenuItem name="2-1">
						<router-link to='/membership'>会员管理</router-link>
						</MenuItem>
					</Submenu>
					<Submenu name="4">
						<template slot="title">
							<img src="../assets/images/route/route_08.png" alt="">
							<router-link to="/venue_course">课程管理</router-link>
						</template>
						<MenuItem name="4-1">
						<router-link to='/masterPlate'>课程管理模板</router-link>
						</MenuItem>
					</Submenu>
					<Submenu name="4">
						<template slot="title">
							<img src="../assets/images/route/route_14.png" alt="">
							<router-link to='/VenueSite'> 预约管理</router-link>
						</template>
					</Submenu>
					<Submenu name="4">
						<template slot="title">
							<img src="../assets/images/route/route_18.png" alt="">
							<router-link to="/MyIncome">我的收益</router-link>
						</template>
					</Submenu>
				</Menu>
			</template>
		</div>

		<router-view></router-view>
	</div>
</template>
<script>
	export default {

		data() {

			return {
				theme2: 'light',
				most: [{

						image: require('../assets/images/route/route_03.png'),

						text: 'BOSS信息'

					},

					{

						image: require('../assets/images/route/route_06.png'),

						text: '场馆管理'

					},

					{

						image: require('../assets/images/route/route_08.png'),

						text: '会员管理'

					},

					{

						image: require('../assets/images/route/route_11.png'),

						text: '课程管理',

					},

					{

						image: require('../assets/images/route/route_14.png'),

						text: '预约管理'

					},

					{

						image: require('../assets/images/route/route_18.png'),

						text: '我的收益'

					}

				],

				changeRed: '',

				navActive: false,
				gym_sessionid: ''

			}

		},

		created() {
			let GYM_SESSIONID = JSON.parse(

				window.localStorage.getItem("gym_sessionid")
			);
			this.gym_sessionid = GYM_SESSIONID
		},

		methods: {

			//          gz(){
			//                this.$router.push({
			//                      path: '/venue_course',
			//  
			//                      query: {
			//                      }
			//  
			//                  })
			//          },
			change(index) {

				this.changeRed = index;

				if(this.changeRed == '0') {

					console.log(111)

					this.$router.push({

						path: '/Boss_information',

						query: {

						}

					})

				} else if(this.changeRed == '1') {

					this.$router.push({

						path: '/Venue_information',

						query: {

						}

					})

				} else if(this.changeRed == '2') {

					this.$router.push({

						path: '/membership',

						query: {

						}

					})

				} else if(this.changeRed == '3') {

					this.$router.push({

						path: '/venue_course',

						query: {

						}

					})

				} else if(this.changeRed == '4') {

					this.$router.push({

						path: '/VenueSite',

						query: {

						}

					})

				} else if(this.changeRed == '5') {

					this.$router.push({

						path: '/MyIncome',

						query: {

						}

					})
				}

			},

			service(e) {

				//   "#"+Math.floor(Math.random()*0xffffff).toString(16) //变颜色

				e.target.style.backgroundColor = "#dee1e7";

				e.target.style.borderLeft = "4px solid #2575ff";

				this.$router.push({

					path: '/service',

					query: {

					}

				})
			},
			mould(e) {

				e.target.style.backgroundColor = "#dee1e7";

				e.target.style.borderLeft = "4px solid #2575ff";

				this.$router.push({

					path: '/masterPlate',

					query: {}
				})
			}
		}

	}
</script>
<style scoped>
	.route {
		width: 100%;
		height: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
	}
	
	.nav {
		width: 250px;
		height: 100%;
	}
	
	.nav ul {
		width: 100%;
		top: 5%;
		position: relative;
	}
	
	.nav ul .nav_text {
		width: 100%;
		/*height: 100px;*/
		/*line-height: 100px;*/
		padding-bottom: 30px;
		text-align: center;
		font-size: 18px;
		color: #000000;
		font-family: '微软雅黑';
		font-weight: bold;
	}
	
	.nav ul li {
		width: 100%;
		/* height: 50px;
    
        line-height: 50px; */
	}
	
	.nav ul li .nav_top:nth-child(2) {
		margin-top: 50px;
	}
	
	.nav ul li .nav_top:nth-child(5) {
		margin-top: 50px;
	}
	
	.nav ul li .nav_top {
		width: 100%;
		height: 50px;
		line-height: 50px;
		padding-left: 20%;
		display: flex;
		align-items: center;
	}
	
	.nav ul li .nav_top img {
		display: inline-block;
		width: 16px;
		height: 16px;
	}
	
	.nav ul li .nav_top span {
		display: inline-block;
		padding-left: 7px;
		font-size: 14px;
		color: #606060;
		padding-top: 3px;
	}
	
	.haha {
		background: #dee1e7;
		border-left: 4px solid #2575ff;
		padding-left: 35%!important;
		text-align: center!important;
		color: #000;
	}
	
	.haha span {
		color: #000!important;
		font-weight: bold!important;
	}
	
	.nav ul li .nav_service {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 14px;
		color: #000;
		font-weight: bold;
		position: absolute;
		left: 0;
		top: 150px;
		z-index: 6
	}
	
	.nav ul li .nav_class {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 14px;
		color: #000;
		font-weight: bold;
		position: absolute;
		left: 0;
		top: 350px;
		z-index: 6
	}
</style>